<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>

	<ui:composition template="../template/template.xhtml">

		<ui:define name="content">
			<p:panel header="calendar">

				<p:accordionPanel activeIndex="1">
					<p:tab title="export my calendar">
						<h:form>
							<table>
								<tr>
									<td><h:outputLabel for="from" value="from*" /></td>
									<td><p:calendar value="#{providerScheduleJSF.exportStart}"
											id="from" pattern="dd-MM-yyyy HH:mm" timeZone="CET"
											showOn="button" /></td>
								</tr>
								<tr>
									<td><h:outputLabel for="to" value="to*" /></td>
									<td><p:calendar value="#{providerScheduleJSF.exportEnd}"
											id="to" pattern="dd-MM-yyyy HH:mm" timeZone="CET"
											showOn="button" /></td>
								</tr>
							</table>
							<p:commandButton value="export" styleClass="bottomButton"
								action="#{providerScheduleJSF.exportScheduleEntries}"
								ajax="false" />
						</h:form>
					</p:tab>

					<p:tab title="my calendar">
						<p:schedule value="#{providerScheduleJSF.providerScheduleModel}"
							widgetVar="myschedule" locale="de">

							<p:ajax event="eventSelect"
								listener="#{providerScheduleJSF.onEventSelect}"
								update="eventDetails" oncomplete="eventDialog.show()" />

						</p:schedule>

						<p:dialog widgetVar="eventDialog" header="appointment details"
							showEffect="fade" hideEffect="fade" modal="true">
							<h:panelGrid id="eventDetails" columns="1">
								<p:accordionPanel>
									<p:tab title="service">
										<table>
											<tr>
												<td><h:outputLabel for="serviceName" value="service" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.serviceName}"
														id="serviceName" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="serviceDescription"
														value="description" /></td>
												<td><p:inputTextarea readonly="true"
														value="#{providerScheduleJSF.event.serviceDescription}"
														id="serviceDescription" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="start" value="start" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.appointmentStart}"
														id="start">
														<f:convertDateTime pattern="dd-MM-yyyy HH:mm"
															timeZone="CET" />
													</p:inputText></td>
											</tr>
										</table>
									</p:tab>

									<p:tab title="client">
										<table>
											<tr>
												<td><h:outputLabel for="providerName" value="name" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.clientProviderForename} #{providerScheduleJSF.event.clientProviderSurname}"
														id="providerName" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="providerPhone"
														value="phone number" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.clientProviderPhoneNumber}"
														id="providerPhone" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="providerMail" value="email" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.clientProviderEmail}"
														id="providerMail" /></td>
											</tr>
										</table>
									</p:tab>

									<p:tab title="location">
										<table>
											<tr>
												<td><h:outputLabel for="country" value="country" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.locationCountry}"
														id="country" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="city" value="city" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.locationCity}"
														id="city" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="zip" value="zip" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.locationZip}" id="zip" /></td>
											</tr>
											<tr>
												<td><h:outputLabel for="street" value="street" /></td>
												<td><p:inputText readonly="true"
														value="#{providerScheduleJSF.event.locationStreet}"
														id="street" /></td>
											</tr>
										</table>
									</p:tab>
								</p:accordionPanel>
								<p:gmap
									center="#{providerScheduleJSF.event.locationLatitude}, #{providerScheduleJSF.event.locationLongitude}"
									zoom="15" type="ROADMAP"
									model="#{providerScheduleJSF.event.mapModel}"
									style="width:450px;height:175px" />
								<h:form>
									<p:commandButton value="cancel" styleClass="bottomButton"
										action="#{providerScheduleJSF.cancelAppointment}" />
								</h:form>

							</h:panelGrid>
						</p:dialog>

					</p:tab>
				</p:accordionPanel>

			</p:panel>
		</ui:define>

	</ui:composition>

</h:body>

</html>